<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" label-width="68px" ref="queryForm" size="small"
             style="text-align: left" v-show="showSearch">
      <el-form-item label="姓名" prop="name">
        <el-input
            @keyup.enter.native="handleQuery"
            clearable
            placeholder="请输入姓名"
            style="width: 240px"
            v-model="queryParams.name"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" icon="Search" size="mini" type="warning">搜索</el-button>
        <el-button @click="resetQuery" icon="Refresh" size="mini">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8" style="margin: 10px 0px">
      <el-col :span="1.5">
        <el-button
            type="warning"
            plain
            @click="handleExport"
        ><el-icon><Pointer /></el-icon>导出</el-button>
      </el-col>

        <el-col :span="1.5">
            <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="addSubscribe()"
            >添加</el-button>
        </el-col>

    </el-row>

    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>健康评估</span>
        </div>
      </template>
      <el-table :data="list" row-key="userId" v-loading="loading">
        <el-table-column align="center" type="index" width="50"/>
        <el-table-column align="center" label="姓名" prop="name"/>
        <el-table-column align="center" label="血压" prop="bloodPressure"/>
        <el-table-column align="center" label="心率" prop="heartRate"/>
        <el-table-column align="center" label="饱和度" prop="saturation"/>
        <el-table-column align="center" label="体重" prop="weight"/>
        <el-table-column align="center" label="健康等级" prop="grade"/>
        <el-table-column align="center" label="评估时间" prop="evaluationTime"/>
        <el-table-column
            align="center"
            class-name="small-padding fixed-width"
            label="操作"
            width="160"
        >
          <template #default="scope">
            <el-button
                @click="handleDelete(scope.row)"
                icon="delete"
                size="mini"
                style="color: #FFB101"
                type="text"
            >删除
            </el-button>
            <el-button
                @click="handleAddJkyj(scope.row)"
                icon="plus"
                size="mini"
                style="color: #FFB101"
                type="text"
            >健康预警
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-drawer
        ref="drawerRef"
        v-model="dialog"
        title="新增健康评估"
        direction="rtl"
        class="demo-drawer"
    >
      <div style="padding: 20px 20px">
        <el-card class="box-card" style="text-align: left;line-height: 35px">
          <el-form :model="form" ref="ruleFormRef">
            <el-form-item label="评估日期" prop="evaluationTime">
              <el-date-picker
                  v-model="form.evaluationTime"
                  type="date"
                  placeholder="请选择日期"
              />
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="血压" prop="bloodPressure">
              <el-input v-model="form.bloodPressure" autocomplete="off" />
            </el-form-item>
            <el-form-item label="心率" prop="heartRate">
              <el-input v-model="form.heartRate" autocomplete="off" />
            </el-form-item>
            <el-form-item label="饱和度" prop="saturation">
              <el-input v-model="form.saturation" autocomplete="off" />
            </el-form-item>
            <el-form-item label="体重" prop="weight">
              <el-input v-model="form.weight" autocomplete="off" />
            </el-form-item>
            <el-form-item label="健康等级" prop="grade">
              <el-input v-model="form.grade" autocomplete="off" />
            </el-form-item>
          </el-form>
          <div style="display: flex;justify-content: space-between;padding: 0px 30px">
            <!--            <span style="color: red;font-size: 22px;font-weight: bold">￥248.00</span>-->
            <el-button type="success" @click="submitForm">添加</el-button>
          </div>
        </el-card>
      </div>
    </el-drawer>

    <el-drawer
        ref="drawerRef"
        v-model="dialog2"
        title="新增健康预警"
        direction="rtl"
        class="demo-drawer"
    >
      <div style="padding: 20px 20px">
        <el-card class="box-card" style="text-align: left;line-height: 35px">
          <el-form ref="ruleFormRef">
<!--            <el-form-item label="评估日期" prop="evaluationTime">-->
<!--              <el-date-picker-->
<!--                  disabled-->
<!--                  v-model="detail.evaluationTime"-->
<!--                  type="date"-->
<!--                  placeholder="请选择日期"-->
<!--              />-->
<!--            </el-form-item>-->
<!--            <el-form-item label="预警日期" prop="evaluationTime">-->
<!--              <el-date-picker-->
<!--                  v-model="jkyjForm.evaluationTime"-->
<!--                  type="date"-->
<!--                  placeholder="请选择日期"-->
<!--              />-->
<!--            </el-form-item>-->
            <el-form-item label="名称" prop="name">
              <el-input v-model="detail.name" disabled autocomplete="off" />
            </el-form-item>
            <el-form-item label="健康等级" prop="grade">
              <el-input v-model="detail.grade" disabled autocomplete="off" />
            </el-form-item>
            <el-form-item label="血压" prop="bloodPressure">
              <el-input v-model="detail.bloodPressure" disabled autocomplete="off" />
              <el-select
                  v-model="jkyjForm.bloodPressure"
                  placeholder="Select"
                  style="width: 240px"
              >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="心率" prop="heartRate">
              <el-input v-model="detail.heartRate" disabled autocomplete="off" />
              <el-select
                  v-model="jkyjForm.heartRate"
                  placeholder="Select"
                  style="width: 240px"
              >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="饱和度" prop="saturation">
              <el-input v-model="detail.saturation" disabled autocomplete="off" />
              <el-select
                  v-model="jkyjForm.saturation"
                  placeholder="Select"
                  style="width: 240px"
              >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="体重" prop="weight">
              <el-input v-model="detail.weight" disabled autocomplete="off" />
              <el-select
                  v-model="jkyjForm.weight"
                  placeholder="Select"
                  style="width: 240px"
              >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <div style="display: flex;justify-content: space-between;padding: 0px 30px">
            <el-button type="success" @click="submitJkyjForm">提交</el-button>
          </div>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<script>

export default {
  name: "PhyTaocan",
  data() {
    return {
      detail:{},
      dialog2:false,
      dialog:false,
      dialogFormVisible:false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      list: [],
      // 弹出层标题
      title: "",
      // 表单参数
      form: {},
      jkyjForm: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
      },
      options: [
        {
          value: '偏低',
          label: '偏低',
        },
        {
          value: '偏高',
          label: '偏高',
        }
      ]
    };
  },
  created() {
    this.getTaocanList();
  },
  methods: {

    keep(row){
      this.detail=row;
      this.dialog2=true;
    },

    /** 导出按钮操作 */
    handleExport() {
      this.$confirm(`确定要导出吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击"确定"按钮，执行删除操作
        this.$http.post('jkpg/export', this.queryParams, {
          headers: {
            'Content-Type': 'application/json'
          },
          responseType: 'blob' // 指定响应类型为二进制流
        }).then(res => {
          // 获取响应数据并进行处理
          const url = window.URL.createObjectURL(new Blob([res.data]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', '健康评估列表.xlsx'); // 设置下载文件名
          document.body.appendChild(link);
          link.click();
        });
      }).catch(() => {
        // 用户点击"取消"按钮，什么也不做
      })
    },

    addSubscribe(){
      this.reset();
      this.dialog=true;
    },

    async getTaocanList() {
      this.loading = true;
      const {data: res} = await this.$http.get('jkpg/list', {params:this.queryParams})
      console.log(res)
      this.list = res.data
      // this.total = res.data.total
      this.loading = false
    },

    // 表单重置
    reset() {
      this.form = {
        id: 0,
        name: "",
        bloodPressure: "",
        heartRate: "",
        saturation: "",
        weight: "",
        grade: "",
        evaluationTime: "",
      };
    },

    /** 删除按钮操作 */
    async handleDelete(row) {
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const {data: res} = await this.$http.get('jkpg/delete', {params:{
            id:row.id
          }});
        console.log(res)
        if (res.code == 200) {
          this.getTaocanList();
          this.$message.success('删除成功！')
        } else {
          this.$message.error('服务器异常！')
        }
      }).catch(() => {
        this.$message.info('已取消删除！')
      })
    },

    /**
     * 新增健康预警
     * @param row
     */
    handleAddJkyj(row) {
      this.detail=row;
      this.jkyjForm = {
        id: 0,
        name: row.name,
        bloodPressure: "",
        heartRate: "",
        saturation: "",
        weight: "",
        grade: "",
        evaluationTime: "",
      };
      this.dialog2=true;
    },

    /**
     * 提交健康预警
     */
    async submitJkyjForm() {
      const {data: res} = await this.$http.post('jkyj/add', this.jkyjForm);
      console.log(res)
      if (res.code === 200) {
        this.$message.success('新增预警成功')
        this.dialog2 = false;
        this.getTaocanList();
      } else if (res.code === 50003) {
        this.$message.error('新增预警失败')
      } else {
        this.$message.error('服务器异常')
      }
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getTaocanList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // 查询参数
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        userPhone: "",
      },
          this.getTaocanList();
    },
    /** 修改按钮操作 */
    async handleUpdate(row) {
      console.log(row)
      this.form = JSON.parse(JSON.stringify(row));
      this.title = "更新用户信息";
      this.dialogFormVisible = true;
    },
    /** 提交按钮 */
    async submitForm() {
      await this.$refs["ruleFormRef"].validate(valid => {
        if (valid) {
          this.addFromFun();
        }
      });
      this.dialog = false;
    },
    /**
     * 添加
     * */
    async addFromFun() {
      const {data: res} = await this.$http.post('jkpg/add', this.form);
      console.log(res)
      if (res.code === 200) {
        this.$message.success('新增成功')
        this.getTaocanList();
      } else if (res.code === 50003) {
        this.$message.error('新增失败')
      } else {
        this.$message.error('服务器异常')
      }
    }
  }
};
</script>
